<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head lang="en">
    <meta charset="UTF-8">
    <title>订单数据页</title>
    <script>

        $(function () {

            goPage(1, 5);
            var tempOption = "";
            for (var i = 1; i <= totalPage; i++) {
                tempOption += '<option value=' + i + '>' + i + '</option>'
            }
            $("#jumpWhere").html(tempOption);
        })


        var pageSize = 0;//每页显示行数
        var currentPage_ = 1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
        var totalPage;//总页数
        function goPage(pno, psize) {
            var itable = document.getElementById("adminTbody");
            var num = itable.rows.length;//表格所有行数(所有记录数)

            pageSize = psize;//每页显示行数
            //总共分几页
            if (num / pageSize > parseInt(num / pageSize)) {
                totalPage = parseInt(num / pageSize) + 1;
            } else {
                totalPage = parseInt(num / pageSize);
            }
            var currentPage = pno;//当前页数
            currentPage_ = currentPage;
            var startRow = (currentPage - 1) * pageSize + 1;
            var endRow = currentPage * pageSize;
            endRow = (endRow > num) ? num : endRow;
            //遍历显示数据实现分页
            for(var i=1;i<(num+1);i++){
                var irow = itable.rows[i-1];
                if(i>=startRow && i<=endRow){
                    irow.style.display = "";
                }else{
                    irow.style.display = "none";
                }
            }

            $("#adminTbody tr").hide();
            for (var i = startRow - 1; i < endRow; i++) {
                $("#adminTbody tr").eq(i).show();
            }
            var tempStr = "共" + num + "条记录 分" + totalPage + "页 当前第" + currentPage + "页";
            document.getElementById("barcon1").innerHTML = tempStr;

            if (currentPage > 1) {
                $("#firstPage").on("click", function () {
                    goPage(1, psize);
                }).removeClass("ban");
                $("#prePage").on("click", function () {
                    goPage(currentPage - 1, psize);
                }).removeClass("ban");
            } else {
                $("#firstPage").off("click").addClass("ban");
                $("#prePage").off("click").addClass("ban");
            }

            if (currentPage < totalPage) {
                $("#nextPage").on("click", function () {
                    goPage(currentPage + 1, psize);
                }).removeClass("ban")
                $("#lastPage").on("click", function () {
                    goPage(totalPage, psize);
                }).removeClass("ban")
            } else {
                $("#nextPage").off("click").addClass("ban");
                $("#lastPage").off("click").addClass("ban");
            }

            $("#jumpWhere").val(currentPage);
        }


        function jumpPage() {
            var num = parseInt($("#jumpWhere").val());
            if (num != currentPage_) {
                goPage(num, pageSize);
            }
        }

    </script>
</head>
<body>
<div class="row">
<div class="col-lg-6"style="margin-left: 48%">
    <div class="dataTables_filter" id="editable-sample_filter" >
        <label  >Search: <input th:onblur="|ordername('')|" id="ordername" type="text" placeholder="OrderName" aria-controls="editable-sample" class="form-control medium"  ></label>
    </div>
</div>
</div>

<table class="table table-striped table-hover table-bordered" id="editable-sample">
    <thead>
    <tr>
        <th>订单号</th>
        <th>下单时间</th>
        <th>用户</th>
        <th>电话</th>
        <th>地址</th>
        <th>具体地址</th>
        <th>数量</th>
        <th>书名</th>
        <th>价格</th>
    </tr>
    </thead>
    <tbody id="adminTbody">
    <tr class=""  th:each="order : ${orderlist}">
        <td th:text="${order.orderNum}">Jonathan</td>
        <td th:text="${order.createDate}">Smith</td>
        <td th:text="${order.username}">3455</td>
        <td th:text="${order.phone}">Jonathan</td>
        <td >[[${order.province}]] [[${order.city}]] [[${order.area}]]</td>
        <td th:text="${order.detailAddress}">3455</td>
        <td th:text="${order.count}">Jonathan</td>
        <td th:text="${order.name}">Smith</td>
        <td th:text="${order.newPrice}">3455</td>


    </tr>

    </tbody>
</table>
<div id="barcon" class="barcon">
    <div id="barcon1" class="barcon1"></div>
    <div id="barcon2" class="barcon2" style="float: right;margin-top:  -2%;margin-right: 7%">

            <a href="###" id="firstPage">首页</a>&emsp;
            <a href="###" id="prePage">上一页</a>&emsp;
            <a href="###" id="nextPage">下一页</a>&emsp;
            <a href="###" id="lastPage">尾页</a>

    </div>
</div>



</body>
</html>